<!--单个图片-->
<template>
  <div class="single_pict_box">
    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :class="{ hasFile: fileList.length > 0, hideFirst: beforeUpload }"
      :before-upload="handleBefore"
      :on-change="handleChange"
      :before-remove="handleBeforeRemove"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" style="z-index: 99999">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [],
      beforeUpload: false,
    };
  },
  watch: {
    fileList (n) {
      console.log(n)
    }
  },
  methods: {
    handleBefore (file) {
      this.beforeUpload = true
    },
    handleChange (file, fileList) {
      this.beforeUpload = false
    },
    handleSuccess (res, file, fileList) {
      this.fileList = fileList
    },
    handleBeforeRemove (file, fileList) {
      this.beforeUpload = true
    },
    handleRemove (file, fileList) {
      this.beforeUpload = false
      this.fileList = fileList.slice(-3);
    },
    handlePreview (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
}
</script>
<style lang="scss" scoped>
.single_pict_box {
  position: relative;
  /deep/ .el-upload--picture-card {
    width: 180px;
    height: 120px;
    line-height: 120px;
  }
  .hasFile /deep/ {
    .el-upload--picture-card {
      display: none;
    }
  }
  .hideFirst /deep/ {
    .el-upload--picture-card {
      display: none;
    }
  }
}
</style>